<template>
  <div>
    <el-row>
      <el-col :span="7" :offset="0">
        <!-- offset控制间距 -->
        <el-card
          :body-style="{ padding: '0px' }"
          shadow="hover"
          class="card-container"
        >
          <img src="../../assets/images/user.png" class="image" />
          <div style="padding: 10px">
            <span>动漫男头</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7" :offset="1">
        <el-card
          :body-style="{ padding: '0px' }"
          shadow="hover"
          class="card-container"
        >
          <img src="../../assets/images/1.jpg" class="image" />
          <div style="padding: 14px">
            <span>动漫壁纸</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-popover
                placement="bottom"
                title="动漫壁纸"
                width="200"
                trigger="click"
                content="这是一个动漫壁纸，非常可爱"
              >
                <el-button class="button" slot="reference">操作按钮</el-button>
              </el-popover>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="7" :offset="1">
        <div>
          <template>
            <div>
              <el-skeleton :loading="loading" animated :count="1">
                <template slot="template">
                  <el-skeleton-item
                    variant="image"
                    style="width: 100%; height: 320px"
                  />
                  <div style="padding: 14px">
                    <el-skeleton-item variant="h3" style="width: 50%" />
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-items: space-between;
                        margin-top: 16px;
                        height: 16px;
                      "
                    >
                      <el-skeleton-item
                        variant="text"
                        style="margin-right: 16px"
                      />
                      <el-skeleton-item variant="text" style="width: 30%" />
                    </div>
                  </div>
                </template>
                <template>
                  <el-card
                    :body-style="{ padding: '0px', marginBottom: '1px' }"
                    v-for="item in lists"
                    :key="item.name"
                    class="card-container"
                  >
                    <img :src="item.imgUrl" class="image multi-content" />
                    <div style="padding: 14px">
                      <span>{{ item.name }}</span>
                      <div class="bottom card-header">
                        <span class="time">{{ currentDate }}</span>
                        <el-button class="button" @click="setLoading"
                          >刷新</el-button
                        >
                      </div>
                    </div>
                  </el-card>
                </template>
              </el-skeleton>
            </div>
          </template>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentDate: new Date(),
      loading: true,
      lists: [],
    }
  },
  mounted () {
    this.loading = false
    this.lists = [
      {
        imgUrl:
          'https://img1.baidu.com/it/u=4236290357,1931045888&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto',
        name: '喵喵',
      }
    ]
  },

  methods: {
    setLoading () {
      this.loading = true
      setTimeout(() => (this.loading = false), 2000)
    },
  }
}
</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
  height: 320px; /* 设置统一的高度 */
  object-fit: cover; /* 确保图片填充整个容器 */
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card-container {
  /* height: 360px; 设置统一的高度 */
  display: flex;
  flex-direction: column;
}

.card-container .el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-container .el-card__body img {
  /* height: 320px; 确保图片高度一致 */
  object-fit: cover; /* 确保图片填充整个容器 */
}
</style>